<!DOCTYPE html>
<html lang="en">

<head>

  <!-- All Meta -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="author" content="$OPK">
  <meta name="robots" content="">
  <meta name="keywords" content="$OPK">
  <meta name="description" content="$OPK">
  <meta property="og:title" content="$OPK">
  <meta property="og:description" content="$OPK">
  <meta property="og:image" content="images/favicon2.png">
  <meta name="format-detection" content="telephone=no">

  <!-- Mobile Specific -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Page Title Here -->
  <title>$OPK</title>

  <!-- FAVICONS ICON -->
  <link rel="shortcut icon" type="image/png" href="images/favicon2.png">
  <link rel="stylesheet" href="./vendor/toastr/css/toastr.min.css">
  <link href="vendor/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">
  <link href="vendor/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
  <link href="vendor/jquery-nice-select/css/nice-select.css" rel="stylesheet">
  <link href="vendor/lightgallery/css/lightgallery.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <link href="css/my_style.css" rel="stylesheet">
  <link href="css/new.css" rel="stylesheet">
  <link href="css/preloadnew.css" rel="stylesheet">
</head>

<body style="background-color: #111624">

<!--*******************
    Preloader start
********************-->

<div id="preloader" style="background-color: #000;">
  <div class="honeycomb">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>
<!--*******************
    Preloader end
********************-->

<div class="tranTip">
  <div class="main">
    <p class="closeTopRight" onclick="closeTranTip()">x</p>
    <div class="title">
      TRANSFER
    </div>
    <input type="text" id="tranToAddress" placeholder="input address"/>
    <input type="text" id="tranAmount" placeholder="input amount"/>
    <button class="tranTipSend" onclick="doTransferNew()">transfer</button>
  </div>
</div>


<!--**********************************
    Main wrapper start
***********************************-->
<div id="main-wrapper">

  <!--**********************************
      Nav header start
  ***********************************-->
  <div class="nav-header">
    <a class="brand-logo nav-control2 btn" onclick="onclick_brand_logo()">
      <h2 class="logo-abbr" style="margin-bottom: 0px;display: grid;align-content: center;">
        <img src="my_imgae/LOGO.png" width="95" style="padding-inline: 1px;">
      </h2>
    </a>

    <div class="nav-control d-none" style="margin-top: 5px;">
      <div class="hamburger">
        <span class="line"></span><span class="line"></span><span class="line"></span>
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <rect x="22" y="11" width="4" height="4" rx="2" fill="#2A353A"/>
          <rect x="11" width="4" height="4" rx="2" fill="#2A353A"/>
          <rect x="22" width="4" height="4" rx="2" fill="#2A353A"/>
          <rect x="11" y="11" width="4" height="4" rx="2" fill="#2A353A"/>
          <rect x="11" y="22" width="4" height="4" rx="2" fill="#2A353A"/>
          <rect width="4" height="4" rx="2" fill="#2A353A"/>
          <rect y="11" width="4" height="4" rx="2" fill="#2A353A"/>
          <rect x="22" y="22" width="4" height="4" rx="2" fill="#2A353A"/>
          <rect y="22" width="4" height="4" rx="2" fill="#2A353A"/>
        </svg>
      </div>
    </div>

  </div>
  <!--**********************************
      Nav header end
  ***********************************-->

  <!--**********************************
      Header start
  ***********************************-->
  <div class="header">
    <div class="header-content border-bottom"
         style="border-bottom: 0.0625rem solid rgb(255 255 255 / 4%) !important;padding-left: 30px;">
      <nav class="navbar navbar-expand">
        <div class="d-flex justify-content-center align-items-center" style="width: 100%;">
          <div class="collapse navbar-collapse d-flex justify-content-center align-items-center"
               style="max-width:1371px">
            <div class="header-left me-auto2 mx-auto" style="padding-left: 0px;">

              <div class="dashboard_bar">
                <div class="headnavbar d-none d-sm-none d-md-none d-lg-block">

                  <ul class="nav justify-content-center ">
                    <li class="nav-item">
                      <a class="nav-link mylink" href="index.html" style="font-size: large;color: var(--red)">Home</a>
                    </li>
                    <li class="nav-item">
                     <a class="nav-link mylink" href="myAssets.html?to=Runes" style="font-size: large;color: var(--red)">Runes</a>
                    </li>
                    <li class="nav-item">
                     <a class="nav-link mylink" href="https://opk.gitbook.io/opkrunes/" target="_blank" style="font-size: large;color: var(--red)">Document</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link mylink" href="javascript:onComingsoon();"
                         style="font-size: large; color: var(--red)">Market</a>
                    </li>

                    <!-- <li class="nav-item">
                      <a class="nav-link mylink" href="launchpad.html" style="font-size: large;" >LAUNCHPAD</a>
                    </li> -->

                    <li class="nav-item center My_Assets d-none">
                      <a class="nav-link mylink btn-op" href="myAssets.html"
                         style="padding-block: 0.5rem;padding-inline: 0.5rem;border-radius: 0.6rem;
                         font-weight: 400;">My
                        Assets</a>
                    </li>

                  </ul>
                </div>
              </div>
              <div style="height: 69px;">&nbsp;</div>

            </div>

            <ul class="navbar-nav header-right ms-auto2">

              <li class="nav-item dropdown notification_dropdown all">

              <li class="nav-item">
                <div id="head_navbar_center_btn" onclick="Head_ConnectWallet('openAccountModal')"
                     class="btn my-btn center border px-1" style="display: none;border-radius: 0.6rem;">
                  <div class="center" style="display: flex;">
                    <div id="head_chainicon" style="margin-left: 0.2rem;"></div>
                    <span id="head_amount" class="nav-text border mx-1 px-1 "
                          style="font-size: large;border-radius: 0.6rem;"></span>
                    <div class="d-none d-sm-none d-md-block d-lg-none d-xl-block">
                      <a><span id="head_address" class="nav-text  mb-0 border mx-1 px-1"
                               style="font-size: large;border-radius: 0.6rem;"></span></a>
                    </div>
                  </div>
                </div>

              <a onclick="Head_ConnectWallet()" id="btn_head_ConnectWallet" class="btn btn-warning my-btn px-3 btn-op"
                 style="padding-block: 6px; border-radius: 0.6rem;">
                Connect Wallet
              </a>

                <div style="height: 69px;">&nbsp;</div>
              </li>
              </li>
            </ul>

          </div>
        </div>
      </nav>
    </div>

  </div>
  <!--**********************************
      Header end ti-comment-alt
  ***********************************-->

  <!--**********************************
      Sidebar start
  ***********************************-->
  <div class="dlabnav border-right" style="border-right: 0.0625rem solid rgb(255 255 255 / 4%) !important;">
    <div class="dlabnav-scroll">
      <hr style="margin-top: 1px;">
      <ul class="metismenu" id="menu" style="height: 70%;">

        <li><a id="onclickHome" href="index.html" aria-expanded="false">
          <span class="nav-text" style="font-size: larger;">Home</span>
        </a></li>

        <li><a href="myAssets.html?to=Runes" aria-expanded="false">
         <span class="nav-text" style="font-size: larger;">Runes</span>
        </a></li>

        <li><a href="https://opk.gitbook.io/opkrunes/" target="_blank" aria-expanded="false">
         <span class="nav-text" style="font-size: larger;">Document</span>
        </a></li>

        <li><a href="javascript:onComingsoon();" aria-expanded="false">
          <span class="nav-text" style="font-size: larger;">Market</span>
        </a></li>

        <li class="My_Assets d-none"><a href="myAssets.html" aria-expanded="false">
          <span class="nav-text"
                style="
                padding-block: 0.5rem;
                padding-inline: 0.5rem;border-radius: 0.6rem;
                background-color: var(--red);
                color: var(--white);
                font-weight: 400;">My Assets</span>
        </a></li>

        <hr style="width: 80%;margin-left: 10%;">

      </ul>

      <div class="d-flex justify-content-center align-items-center">
        <a class="nav-text text-white" style="margin: 0 auto;padding-top: 0px; padding-bottom: 2px;">
          <img src="my_imgae/Links_A.png" style="width:30px; margin-inline: 4px;">
          <img src="my_imgae/Links_B.png" style="width:30px; margin-inline: 4px;">
          <img src="my_imgae/Links_C.png" style="width:30px; margin-inline: 4px;">
          <img src="my_imgae/Links_D.png" style="width:30px; margin-inline: 4px;">
          <img src="my_imgae/Links_F.png" style="width:30px; margin-inline: 4px;">
        </a>
      </div>

      <hr>

      <div class="copyright">
        <div class="d-flex justify-content-center align-items-center btn-default"
             onclick="Head_ConnectWallet('openAccountModal')">
          <div class="row" style="display: none;">
            <div class="col-1 px-4">
              <img src="my_imgae/arbitrum.png" style="width:30px; ">
            </div>
            <div class="col">
              <div id="copyright_address" style="color:aliceblue;"></div>
              <div style="color: dimgray;">Wallet connected</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--**********************************
      Sidebar end
  ***********************************-->

  <div class="d-flex  justify-content-center  align-items-center">
    <div class="content-body " style="width: 100%;max-width: 1369px;padding-bottom: 2rem;">
      <div class="container-fluid" style="width: 100%;">


        <!--**********************************
          Content body start
        ***********************************-->
        <div class="tab-content">
        </div>

        <div class="col-xl-9 mt-2" id="AssetsTabs">
          <div>
            <!-- Nav tabs -->
            <ul class="nav nav nav-pills " role="tablist">
              <li class="nav-item">
                <a class="nav-link active btn border px-3 mx-1" id="Tokens" onclick="bodyNavClick('Tokens')"
                   style=" font-size: large ;border-radius: 1.6rem;">
                  Tokens
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link btn border px-3 mx-1" id="Runes" onclick="bodyNavClick('Runes')"
                   style=" font-size: large ;border-radius: 1.6rem;">
                  Runes
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link btn border px-3 mx-1" id="NFTS" onclick="bodyNavClick('NFTS')"
                   style=" font-size: large ;border-radius: 1.6rem;">
                   NFTS
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div class="mt-5">
          <div style="max-width: 500px;display: flex;">

            <div onclick="Refresh()" class="btn my-btn center mx-1" style=" font-size: large ;border-radius: 1.6rem; ">
              <div class="d-flex">
                Refresh
                <img src="my_imgae/Refresh.png" width="24" style="padding-inline: 1px;">
              </div>
            </div>
          </div>
        </div>

        <div class="tab-content" style="min-height: 350px;">
          <div class="tab-pane fade show active" id="Tokens-pane" role="">
            <div class="tokens-list row mt-4 ">

              <div class="col-6 col-md-3 col-xl-2 mb-3">
                <div style="background-color: rgb(0, 0, 0);min-width: 177px;border-radius: 0.5rem;overflow: hidden">
                  <div class="d-flex  flex-column justify-content-center align-items-center"
                       style="position: relative;height: 210px; min-width: 177px; background-color: rgb(42 48 62); color: rgb(231, 231, 231);">
                    <div class="mx-1" style="position: absolute;left: 1rem;top: 1rem;font-size: 1.25rem;color: var(--red);"> OPK&nbsp;<img
                            src="my_imgae/aaa.png"style="padding-inline: 1px;width: 1.25rem;"></div>
                    <div id="BalanceOf" class=" rune-content p-3 break-all py-1" style="font-size: 2.5rem;">0</div>
                    <div id="BalanceOf2" class="m-0 py-0 rune-content p-3 break-all" style="color: #999999;font-size: 1.25rem"> 0 mints
                    </div>
                  </div>
                  <div class="p-2" style="min-height: 72px; color: rgb(255, 255, 255);">
                    <div class="d-flex flex-row justify-content-between mb-0 p-2 pt-0">
                      <div class="sg-font" style="font-size: 1rem">#1</div>
                      <div class="sg-font hash text-overflow" style="visibility: hidden;">
                        0x5f61e5f66b8bf01e6360b896bb3271372cb95a7b681cf9a3c858037df24f410b
                      </div>
                    </div>
                    <div class="row mx-0 my-1">
                      <div onclick="showTranTip()" class="col btn my-btn center px-0 py-1"
                           style="margin-right: 0.5rem;font-size: 1rem;border-radius: 1.25rem;color: var(--red);border-color: var(--red)">
                        transfer
                      </div>

                      <div onclick="javascript:onComingsoon();" class="col btn my-btn center px-0 py-1"
                           style="font-size: 1rem;border-radius: 1rem;color: var(--red);border-color: var(--red)">
                        list
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-6 col-md-3 col-xl-2 mb-3" style="visibility: hidden;">
                <div style="background-color: rgb(0, 0, 0);min-width: 177px;border-radius: 0.5rem;overflow: hidden">
                  <div class="d-flex  flex-column justify-content-center align-items-center"
                       style="position: relative;height: 210px; min-width: 177px; background-color: rgb(42 48 62); color: rgb(231, 231, 231);">
                    <div class="mx-1" style="position: absolute;left: 1rem;top: 1rem;font-size: 1.25rem;color: var(--red);"> OPK&nbsp;<img
                            src="my_imgae/aaa.png"style="padding-inline: 1px;width: 1.25rem;"></div>
                    <div id="BalanceOf" class=" rune-content p-3 break-all py-1" style="font-size: 2.5rem;">0</div>
                    <div id="BalanceOf2" class="m-0 py-0 rune-content p-3 break-all" style="color: #999999;font-size: 1.25rem"> 0 mints
                    </div>
                  </div>
                  <div class="p-2" style="min-height: 72px; color: rgb(255, 255, 255);">
                    <div class="d-flex flex-row justify-content-between mb-0 p-2 pt-0">
                      <div class="sg-font" style="font-size: 1rem">#1</div>
                      <div class="sg-font hash text-overflow" style="visibility: hidden;">
                        0x5f61e5f66b8bf01e6360b896bb3271372cb95a7b681cf9a3c858037df24f410b
                      </div>
                    </div>
                    <div class="row mx-0 my-1">
                      <div onclick="javascript:onComingsoon();" class="col btn my-btn center px-0 py-1"
                           style="margin-right: 0.5rem;font-size: 1rem;border-radius: 1.25rem;color: var(--red);border-color: var(--red)">
                        transfer
                      </div>

                      <div onclick="javascript:onComingsoon();" class="col btn my-btn center px-0 py-1"
                           style="font-size: 1rem;border-radius: 1rem;color: var(--red);border-color: var(--red)">
                        list
                      </div>
                    </div>
                  </div>
                </div>
              </div>


            </div>
          </div>

          <div class="tab-pane fade show" id="Runes-pane" role="tabpanel">
            <div class="runes-list row mt-4 ">
            </div>
          </div>

          <div class="tab-pane fade show" id="NFTS-pane" role="tabpanel">
            <div class="runes-list row mt-4 ">
            </div>
          </div>

        </div>

        <div class="d-none d-sm-none d-md-block" style="visibility: hidden;">Anim pariatur cliche reprehenderit, enim
          eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
          dolor brunch. Food truck quinoa nesciunt laborum eiusmod.Food truck quinoa nesciunt laborum eiusmod.Food truck
          quinoa nesciunt laborum eiusmod.
        </div>

      </div>
    </div>
  </div>
  <div class="d-flex justify-content-center align-items-center" style="background-color: #111624">
    <div class="content-body " style="max-width: 1369px; padding-bottom: 2rem;padding-top: 2rem;">
      <div class="container-fluid">

        <div class="d-none d-sm-none d-md-block" style="visibility: hidden;">Anim pariatur cliche reprehenderit, enim
          eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
          dolor brunch. Food truck quinoa nesciunt laborum eiusmod.Food truck quinoa nesciunt laborum eiusmod.Food truck
          quinoa nesciunt laborum eiusmod.
        </div>

        <!--**********************************
          Content body end
        ***********************************-->
        <!--**********************************
            Footer start
        ***********************************-->
        <div class="my-5">
          <div class="center"><h3>Join Us On</h3></div>

          <div class="row mt-3">
            <div class="col-xl-6">
              <div class="row">
                <div class="col">
                  <a href="https://twitter.com/opkrunes" target="_blank">
                    <p class="mb-1 mycard px-1 py-2 m-3 center d-flex">
                      <img src="my_imgae/ic-twitter.png" style="padding-inline: 1px;"><span style="color: aliceblue;"> &nbsp;Twitter</span>
                    </p>
                  </a>
                </div>
                <div class="col">
                  <p class="mb-1 mycard px-1 py-2 m-3 center d-flex">
                    <img src="my_imgae/ic-discord.png" style="padding-inline: 1px;"><span style="color: aliceblue;"> &nbsp;Discord</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="col-xl-6">
              <div class="row">
                <div class="col">
                  <a>
                    <p class="mb-1 mycard px-1 py-2 m-3 center d-flex">
                      <img src="my_imgae/ic-telegram.png" style="padding-inline: 1px;"><span style="color: aliceblue;"> &nbsp;Telegram</span>
                    </p>
                  </a>
                </div>
                <div class="col">
                  <p class="mb-1 mycard px-1 py-2 m-3 center d-flex">
                    <img src="my_imgae/ic-medium.png" style="padding-inline: 1px;"><span style="color: aliceblue;"> &nbsp;Medium</span>
                  </p>
                </div>
              </div>
            </div>
          </div>

        </div>


        <!--**********************************
        Footer end
        ***********************************-->
      </div>

    </div>
  </div>

  <!--**********************************
    copyright start
  ***********************************-->
  <div class="footer out-footer style-2">
    <div class="copyright ">
      <!-- <p>2023 Chainbet.com All Rights Reserved</p> -->
    </div>
  </div>
  <!--**********************************
    copyright end
  ***********************************-->
  <!--**********************************
     Support ticket button start
  ***********************************-->

  <!--**********************************
     Support ticket button end
  ***********************************-->

</div>
<!--**********************************
    Main wrapper end
***********************************-->

<!--removeIf(production)-->

<!--**********************************
    Scripts
***********************************-->
<!-- Required vendors -->
<script src="vendor/global/global.min.js"></script>
<script src="vendor/bootstrap-select/dist/js/bootstrap-select.min.js"></script>
<script src="vendor/jquery-nice-select/js/jquery.nice-select.min.js"></script>
<script src="vendor/toastr/js/toastr.min.js"></script>
<script src="vendor/chart.js/Chart.bundle.min.js"></script>
<script src="vendor/lightgallery/js/lightgallery-all.min.js"></script>
<script src="js/custom.js"></script>
<script src="js/dlabnav-init.js"></script>
<script src="js/demo.js"></script>
<!-- <script src="js/styleSwitcher.js"></script> -->
<script src="my_js/bignumber.min.js"></script>
<script src="my_js/helper.js"></script>
<script src="my_js/wallet.js"></script>
<script src="my_js/head.js"></script>
<script src="my_js/contracts.js"></script>
<script src="my_js/myAssets.js"></script>
<script src="my_js/slider.js"></script>
<script>
  function initNav(){
    let to = Helper.getQueryVariable('to');
    NFTS.style.display = 'none';
    if (to === 'NFTS') {
      NFTS.style.display = 'block';
      bodyNavClick('NFTS');
    }
    if(to === 'Runes') {
      bodyNavClick('Runes');
    }
  };
  initNav();
</script>

</body>
</html>
